<template>
	<view class="dong w100 ">
		<swiper vertical="true" autoplay="true" circular="true">
			<swiper-item v-for="(item, index) in swilist" :key="index">
				<view class="flex flex-row bghui items-center">
					<image :src="item.head" mode="widthFix"></image>
					<text class="beyond-hiding" style="font-size: 22rpx;">
						{{ item.nickname }} {{item.type==1?'抽中了':'参与了'}}{{item.luckName}}{{item.type==2?'抽奖':''}}
					</text>
				</view>
	
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
// 滚动轮播显示用户中奖
export default {
	name: 'flowRoll',
	props: {
		swilist: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	data() {
		return {
			moveLeft: 0,
			screenWidth: 0,
			domWidth: 0,
			background: '',
			
		};
	},
	

	methods: {
		/* 链接跳转 */
		redirectTo(link) {
			this.$emit('redirectTo', link);
		},
		/* 纵向滚动 */
		longitudinalRolling() {
			if (this.value.items.length == 1) {
				this.value.items.push(this.value.items[0]);
			}
		},
		/* 横向滚动 */
		horizontalRolling() {
			setInterval(()=> {
				this.moveLeft--;
				if (this.moveLeft <= this.domWidth) {
					this.moveLeft = this.screenWidth;
				}
			}, 20);
		},
		getScreenWidth() {
			/* 获取屏幕宽度 */
			this.screenWidth = uni.getSystemInfoSync().windowWidth;

			/* 横向滚动 判断对其方式  1表示向左对其  2表示居中  3表示向右对齐*/
			if (this.value.text_align == 1) {
				this.moveLeft = 0;
			} else if (this.value.text_align == 2) {
				this.moveLeft = this.screenWidth / 2;
			} else if (this.value.text_align == 3) {
				this.moveLeft = this.screenWidth;
			}

			/* 获取内容宽度 */
			const query = uni.createSelectorQuery().in(this);
			query
				.select('#notice-con')
				.boundingClientRect(data => {
					this.domWidth = data.width;
				})
				.exec();
		}
	}
};
</script>

<style lang="scss">
	.dong {
		width: 100%;
		height: 150rpx;
		overflow: hidden;
		
		image {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			margin-right: 10rpx;
			border: 2rpx solid #fff;
		}
	
		.bghui {
			padding: 10rpx 20rpx;
			background: rgba(0, 0, 0, 0.3);
			display: inline-flex;
			color: #fff;
			border-radius: 40rpx;
			margin-left: 0rpx;
			margin-top: 20rpx;
			z-index: 99;
	
		}
    .beyond-hiding {
      width: 90%;
      overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
	}
</style>